<template>
  <div class="container">
    <div class="items">
      <!-- <div class="item">
        <div class="item-left">分享转化率</div>
        <div class="item-right">
          {{
            shopData.shareTransformPercent &&
              `${shopData.shareTransformPercent}%`
          }}
        </div>
      </div>
      <div class="item">
        <div class="item-left">折扣转化率</div>
        <div class="item-right">{{ shopData.discountTransformPercent }}%</div>
      </div>
      <div class="item">
        <div class="item-left">浏览数</div>
        <div class="item-right">{{ shopData.scaned }}</div>
      </div> -->
      <div class="charts">
        <div class="chart">
          <span class="title">分享转化率</span>
          <yd-countup
            :endnum="shopData.shareTransformPercent"
            :duration="1"
            suffix="%"
          ></yd-countup>
        </div>
        <div class="chart">
          <span class="title">折扣转化率</span>
          <yd-countup
            :endnum="shopData.discountTransformPercent"
            :duration="1"
            suffix="%"
          ></yd-countup>
        </div>
        <div class="chart">
          <span class="title">浏览数</span>
          <yd-countup
            :endnum="shopData.scaned"
            :duration="1"
            suffix="%"
          ></yd-countup>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  shopScanNum,
  shareTransformPercent,
  discountTransformPercent
} from '@/api';
import axios from 'axios';

export default {
  name: 'shopData',
  data() {
    return {
      shopData: {
        discountTransformPercent: 0,
        shareTransformPercent: 0,
        scaned: 0
      }
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      axios
        .all([
          this.getShopScanNum(),
          this.getShareTransformPercent(),
          this.getDiscountTransformPercent()
        ])
        .then(
          axios.spread((a, b, c) => {
            this.shopData.scaned = (a.data && a.data.length) || 0;
            this.shopData.shareTransformPercent = b.data || 0;
            this.shopData.discountTransformPercent = c.data || 0;
            this.render();
          })
        );
    },
    getShopScanNum() {
      return shopScanNum({
        entityType: null,
        entityId: 1,
        type: 1
      });
    },
    getShareTransformPercent() {
      return shareTransformPercent({
        entityType: 'business',
        entityId: 1
      });
    },
    getDiscountTransformPercent() {
      return discountTransformPercent({
        bussinesId: 1
      });
    },
    render() {}
  }
};
</script>
<style scoped lang="less">
.items {
  .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.28rem;
    color: #333;
    padding: 0.3rem 0.15rem;
    border-bottom: 1px solid #f2f2f2;
    background: white;

    .item-left {
      font-weight: 500;
    }

    .item-right {
      color: #666;
      letter-spacing: 0.01rem;
    }
  }
}

.charts {
  width: 100%;
  display: flex;
  justify-content: space-around;

  .chart {
    width: 33.3%;
    font-size: 0.4rem;
    font-weight: 500;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .title {
      font-size: 0.28rem;
      font-weight: normal;
      margin: 0.15rem 0;
    }
  }
}
</style>
